/* hook组件 useEffect */
import React, {useEffect, useState} from "react";
import {Button} from "antd";

/*
* useEffct：在函数组件中，使用生命周期函数
*   + useEffect(callback)
*       + 第一次渲染完毕后，执行 callback，等价于 componentDidMount
*       + 在租件每一次更新完毕后，等价于 componentDidUpdate
*   + useEffect(callback, [])
*       + 只有第一次渲染完毕后，才会执行callback，每一次视图更新完毕后，callback 不再执行
*       + 类似于 componentDidMount
*   + useEffect(callback, [依赖的状态(多个状态)])
*       + 第一次渲染完会执行 callback
*       + 当依赖的状态(或多个依赖的状态中的一个)发生改变，也会触发 callback 执行，无变化，不会执行
*
*   + useEffect(()=>{
*       return ()=>{
*           // 获取的是上一次的状态值
*       }
*     })
*       + 如果组件更新，会把上一次返回的小函数执行(可以理解为上一次渲染的组件释放了)
*
* */
const Demo = function (props) {
    let [num, setNum] = useState(0),
        [x, setX] = useState(10)

    useEffect(() => {
        // 获取最新的状态值
        console.log('@1', num)
    })

    useEffect(() => {
        console.log('@2', num)
    }, [])

    useEffect(() => {
        console.log('@3', x)
    }, [x])

    useEffect(()=>{
        return ()=>{
            // 获取的是上一次的状态值
            console.log("@4",num)
        }
    })

    const handle = () => {
        setNum(num + 1)
        setX(x + 1)
    }
    return <div className="demo">
        <span className="num">num:{num}</span>
        <span className="num">x:{x}</span>
        <Button type="primary" size="small" onClick={handle}>新增</Button>
    </div>
}
export default Demo
